<template>
  <div>
    <n-card title="博文列表">
        <n-divider title-placement="left">
            <n-button type="info" ghost @click="addArticle('1','1')">
      发布博文
    </n-button>
  </n-divider>
       
        <n-data-table
      :bordered="false"
      :single-line="false"
      :columns="columns"
      :data="data"
    
    />
 
    <br>
    <n-pagination
    v-model:page="page"
    v-model:page-size="pageSize"
    :page-count="100"
    show-size-picker
    :on-update:page="pageBtn"
    :on-update:page-size="pageSizeBtn"
    :page-sizes="[10, 20, 30, 40,50,100]"
  />
  </n-card>

</div>
</template>

<script  setup lang="ts">
import { h, getCurrentInstance,ref } from 'vue'
import {NButton, } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
type RowData = {
  key: number
  name: string
  age: number
  address: string
}
//发布
const instance =getCurrentInstance();
const addArticle=(state:string,id:string)=>{
    instance?.proxy?.$Bus.emit('vae-goPath',{name:'addArticle',id,state})

}



//每页数量改变
const pageSizeBtn=(pageSize:number)=>{
console.log(pageSize);

}
const pageBtn=(page:number)=>{
console.log(page);

}
const createColumns = ({
    
  sendMail
}: {
  sendMail: (rowData: RowData) => void
}): DataTableColumns<RowData> => {
  return [
    {
      title: '标题',
      key: 'name',
    },
    {
      title: '分类',
      key: 'age'
    },
    {
      title: '内容',
      key: 'address'
    },
    {
      title: '发布人',
      key: 'address'
    },
    {
      title: '操作',
      key: 'actions',
      render (row) {
        return h(
          NButton,  
          {
            size: 'small',
            onClick: () => sendMail(row)
          },
          { default: () => '编辑' }
        )
      }
    }
  ]
}
const createData = (): RowData[] => [
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: 1,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  }
]
const data=createData();
const columns=createColumns({
        sendMail (rowData) {
            console.log(rowData);
            addArticle('0',String(rowData.key))
        }
      })
//分页
const page=ref(1)
const pageSize=ref(10)
</script>

<style lang="less" scoped></style>
